<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <div id="main" style="width: 100%; height: 400px"></div>
    </el-card>
  </div>
</template>
<script>
/*
    echarts使用步骤：
        1.npm 安装 echarts插件
        2.在页面组件里引入echarts插件
        3.准备一个具备宽高的dom容器（标签）
        4.初始化echarts实例对象
        5.使用实例对象的setOption方法，设置图表的配置项和数据 --- 客户端只需要在api里获取这些数据即可
        6.注意：要在数据获取成功之后，才可以进行设置，绘制图表
*/
import * as echarts from "echarts";
export default {
  data() {
    return {
      option: {},
      myChart: {},
    };
  },
  methods: {
    async getOptions() {
      const {
        data: { data, meta },
      } = await this.$http.get("reports/type/1");
      if (meta.status !== 200) return this.$message.error("获取数据失败");
      this.option = data;
      // 给echarts实例对象设置option数据，要在数据获取成功之后，进行设置，绘制图表
      this.myChart.setOption(this.option);
    },
  },
  mounted() {
    this.getOptions();
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById("main"));
  },
};
</script>